{% if request.GET.popup %}
{% extends "shuup/admin/base_popup_with_support.jinja" %}
{% else %}
{% extends "shuup/admin/base.jinja" %}
{% endif %}

{% block action_buttons %}
    <div class="btn-toolbar" role="toolbar">
        <button class="btn btn-primary dropdown-toggle" id="media-folder-edit-button" onclick="MediaBrowser.openFolderContextMenu(event)">
            <i class="fa fa-cog"></i>
            {% trans %}Edit{% endtrans %}
            <span class="caret"></span>
        </button>
        <button class="btn btn-inverse" id="upload-button-wrapper">
             {# wrapper will be filled with an invisible file input by Javascript #}
             <i class="fa fa-upload"></i> {% trans %}Upload{% endtrans %}
        </button>
        <button class="btn btn-inverse" id="copy-path-wrapper">
             <i class="fa fa-clipboard"></i> {% trans %}Copy folder path{% endtrans %}
        </button>
    </div>
{% endblock %}

{% block content %}
    <div id="BrowserView"></div>
{% endblock %}
{% block extra_js %}
    <script src="{{ shuup_static("shuup_admin/js/media-browser.js") }}"></script>
    <script>
    window.MediaBrowser.init({{ browser_config|json }});
    window.MediaBrowser.setupUploadButton(document.getElementById("upload-button-wrapper"));
    window.MediaBrowser.setupCopyButton(document.getElementById("copy-path-wrapper"));
    </script>
{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href="{{ shuup_static("shuup_admin/css/media-browser.css") }}">
    <style>body.popup .support-nav {padding:0;padding-bottom: 10px}</style>
{% endblock %}
